<template>
  <div class="require combground">
    <div class="container">
      <div class="comtitle">
        <h2 class="comh2">发布需求</h2>
      </div>
      <div class="content">
        <div class="step">
          <m-step :steps="steps" :active="active"/>
        </div>
        <div class="step-info">
          <router-view :mydata="mydata" :type="type" ref="form"/>
        </div>
        <div class="btn">
          <m-button class="pre sm-btn" @click="pre" v-if="active > 0 && active < 3">上一步</m-button>
          <m-button class="sm-btn" @click="submit('save')" v-if="active === 2">保存为草稿</m-button>
          <m-button class="sm-btn" @click="next" v-if="active < 2">下一步</m-button>
          <m-button class="sm-btn" @click="submit('pub')" v-if="active === 2">提交</m-button>
          <m-button class="sm-btn" @click="demand" v-if="active === 3">去我的需求</m-button>
          <m-button class="sm-btn" @click="index" v-if="active === 3">去首页逛逛</m-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MStep from '@/components/common/m-step/MStep'
import MButton from '@/components/common/m-button/MButton'
import { requirementPub, requirementDe, requirementUp } from '@/request/api'

export default {
  name: 'Requirement',
  components: {
    MButton,
    MStep
  },
  data() {
    return {
      id: '',
      type: 'add',
      mydata: {
        goods_info: '',
        goods_type: '1',
        goods_class_1: '',
        goods_class_1_txt: '',
        goods_class_2: '',
        goods_class_2_txt: '',
        goods_num: '',
        goods_unit: '',
        goods_unit_txt: '',
        goods_price: '',
        currency: '',
        goods_condition: '',
        transport_type: '',
        transport_type_txt: '',
        country_type: '1',
        province: '',
        city: '',
        area: '',
        address: '',
        days: '',
        pay_type: '',
        remarks: '',
        end_time: '',
        proPic: [],
        proFile: [],
        supportList: [],
        rulesCheckList: []
      },
      steps: [
        { title: '填写需求' },
        { title: '选择供应商' },
        { title: '预览信息' },
        { title: '提交成功' }
      ],
      active: 0
    }
  },
  watch: {
    '$route.name': {
      handler(val) {
        if (val === 'Requirement1') {
          this.active = 0
        } else if (val === 'Requirement2') {
          this.active = 1
        } else if (val === 'Requirement3') {
          this.active = 2
        } else if (['Requirement4Draft', 'Requirement4Submit'].includes(val)) {
          this.dataInit()
          this.active = 3
        }
      },
      immediate: true
    }
  },
  created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.type = 'edit'
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      let that = this
      requirementDe(this.id).then(res => {
        if (res.status === 200) {
          res.data.country_type += ''
          res.data.goods_type += ''
          res.data.currency += ''
          res.data.goods_unit += ''
          res.data.transport_type += ''
          res.data.pay_type += ''
          const arr = [], arr2 = []
          res.data.send_type_all == 1 ? arr.push('all') : ''
          res.data.send_type_zbz == 1 ? arr.push('zbz') : ''
          res.data.send_type_web == 1 ? arr.push('web') : ''
          res.data.supportList = arr
          res.data.rule_72 == 1 ? arr2.push('rule_72') : ''
          res.data.rulesCheckList = arr2
          const date = new Date(res.data.end_time)
          res.data.end_time = date.getTime()
          that.mydata = res.data
        } else {
          that.$toast.show(res.message, 1000, false)
        }
      })
    },
    dataInit() {
      this.mydata = {
        goods_info: '',
        goods_type: '1',
        goods_class_1: '',
        goods_class_1_txt: '',
        goods_class_2: '',
        goods_class_2_txt: '',
        goods_num: '',
        goods_unit: '',
        goods_unit_txt: '',
        goods_price: '',
        currency: '',
        goods_condition: '',
        transport_type: '',
        transport_type_txt: '',
        country_type: '1',
        province: '广东省',
        city: '广州市',
        area: '海珠区',
        address: '',
        days: '',
        pay_type: '',
        remarks: '',
        end_time: '',
        proPic: [],
        proFile: [],
        supportList: [],
        rulesCheckList: []
      }
    },
    next() {
      if (this.active === 0) {
        /** 校验必填 */
        this.$refs.form.look()
        // this.$router.push({ path: "/require/2" });
      } else if (this.active === 1) {
        this.$router.push({ path: '/require/3' })
      } else if (this.active === 2) {
        this.$router.push({ path: '/require/4' })
      }
    },
    pre() {
      if (this.active === 1) {
        this.$router.push({ path: '/require/1' })
      } else if (this.active === 2) {
        this.$router.push({ path: '/require/2' })
      }
    },
    index() {
      this.$router.push({ name: 'Home' })
    },
    demand() {
      this.$router.push({ name: 'MyDemand' })
    },
    submit(type) {
      let that = this
      let mydata = that.mydata
      const picData = JSON.parse(localStorage.getItem('shopPic'))
      const supportList = [];
      picData.map(item => supportList.push(item.mer_id))
      if (mydata.rulesCheckList.indexOf('agree') === -1) {
        return that.$toast.show('请阅读并同意发布需求规则', 1000, false)
      }
      const data = {
        demand_type: 0,
        goods_info: mydata.goods_info,
        goods_type: mydata.goods_type,
        goods_class_1: mydata.goods_class_1 || mydata.class1 && mydata.class1.store_category_id || '',
        goods_class_2: mydata.goods_class_2 || mydata.class2 && mydata.class2.store_category_id || '',
        goods_num: mydata.goods_num,
        goods_unit: mydata.goods_unit,
        goods_price: mydata.goods_price,
        currency: mydata.currency,
        goods_condition: mydata.goods_condition,
        img_list: String(mydata.img_list),
        file_list: String(mydata.file_list),
        country_type: mydata.country_type,
        transport_type: mydata.transport_type,
        country: mydata.country || '中国',
        province: mydata.province,
        city: mydata.city,
        address: mydata.address,
        days: mydata.days,
        pay_type: mydata.pay_type,
        remarks: mydata.remarks,
        supply_list: String(supportList), // 供应商id字符串
        end_time: mydata.end_time,
        send_type_all: mydata.supportList.indexOf('all') == -1 ? '' : '1',
        send_type_zbz: mydata.supportList.indexOf('zbz') == -1 ? '' : '1',
        send_type_web: mydata.supportList.indexOf('web') == -1 ? '' : '1',
        rule_72: mydata.rulesCheckList.indexOf('rule_72') == -1 ? '' : '1',
        status: type == 'pub' ? '1' : '2'
      }
      if (this.type == 'edit') {
        requirementUp({ ...data, id: this.id }).then(res => {
          if (res.status === 200) {
            if (type == 'pub') {
              that.$router.push({ path: '/require/4-2' })
            } else {
              that.$router.push({ path: '/require/4-1' })
            }
          } else {
            that.$toast.show(res.message, 1000, false)
          }
        })
      } else if (this.type === 'add') {
        requirementPub(data).then(res => {
          if (res.status === 200) {
            if (type === 'pub') {
              that.$router.push({ path: '/require/4-2' })
            } else {
              that.$router.push({ path: '/require/4-1' })
            }
          } else {
            that.$toast.show(res.message, 1000, false)
          }
        }).catch(err => {
          this.$message.error(err.message)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .m-button.pre .el-button {
  background: #fff !important;
  border: 1px solid rgb(228, 139, 44) !important;
  color: rgb(228, 139, 44) !important;
}

.require {
  padding: 60px 0 80px 0;

  .content {
    width: 100%;
    padding: 65px 180px 85px 170px;
    color: #656565;
    background: #fff;
    margin-top: 50px;
    font-size: 16px;

    .step-info {
      margin-top: 70px;
    }

    .btn {
      text-align: center;
      display: flex;
      justify-content: center;
      padding-top: 60px;
    }
    .sm-btn {
      // width:235px !important;
      margin-right: 10px;
    }
  }
}

@media only screen and (max-width: 1200px) {
  .require {
    padding: 70px 0;

    .content {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: 65px 0 85px;

      .btn {
        padding-top: 90px;
      }
    }

    .content .step {
      width: 1005px;
    }

    .step-info {
      width: 1005px;
    }

  }
}
</style>
